<template>
  <div v-if="click_see_conf" :class="{'ui segment diverse':!notModal}" class=" myclick_see_show">
    <h3 v-if="!notModal">{{header}}</h3>
    <table_show v-if="lines.length>0&&hasInfo" :titles='titles' :lines='lines' :fields='fields'></table_show>
    <p class="load_more" v-if="hasMore">
      <button class="ui centered button tiny" @click="showMore">加载更多</button>
    </p>
  </div>
</template>

<script type="text/ecmascript-6">
  import tool from 'src/util/tool';
  import util from '_util/index';
  import RP from 'src/util/common/click_see';
  import table_show from 'components/common/table_show';
  import _ from 'lodash';

  export default {
    data() {
      return {
        lines: [],
        lines_chunked: [],
        header: '',
        hasMore: false,
        titles: [],
        nowInd: 0,
        allLines: [],
        fields: [],

      }
    },
    methods: {

      my_init(){
        this.nowInd = 0;
        let conf = this.click_see_conf.rs;
        if (conf) {
          this.titles = conf.titles;
          this.fields = conf.fields;
          this.header = conf.title;
          if (conf.many_line) {
            this.lines = conf.vals
//          this.allLines=conf.vals
//          if(this.allLines.length>6){
//            this.lines_chunked = _.chunk(this.allLines, 6);
//            this.hasMore=true;
//
//          }
//          else{
//            this.lines_chunked = [this.allLines];
//            this.hasMore=false;
//          }
//          this.lines = this.lines_chunked[0];
          } else {
            this.lines = [conf.vals]
          }

        }

      },
      showMore(){
        let add = this.lines_chunked[this.nowInd + 1];
        let next = this.lines_chunked[this.nowInd + 2];
        this.lines = _.concat(this.lines, add);
        if (next && next.length > 0) {
          this.hasMore = true;
        } else
          this.hasMore = false;
        this.nowInd += 1;

        util.ui.refreshModal('fullscreen');
      }
    },
    created(){
      this.my_init();
    },
    watch: {
      click_see_conf: function (val, old) {
        if (val) {
          this.my_init();
        }

      },
//    'click_see_conf.field':function (val,old) {
//      if(val!=old) {
//        this.my_init();
//      }
//
//    },
//    'click_see_conf._id':function (val,old) {
//      if(val&&val!=old) {
//        this.my_init();
//      }
//
//    }
    },
    computed: {
      hasInfo(){
        let vals = this.click_see_conf.rs.vals;
        return RP.hasInfo(vals);
      }
    },
    components: {
      table_show
    },
    props: ['ctl', 'notModal', 'click_see_conf']
  };
</script>

<style rel="stylesheet/less" scoped lang="less">
  .segment.diverse.myclick_see_show {
    color: #000;
    .load_more {
      width: 100%;
      text-align: center;
    }
  }
</style>
